<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Paytone+One|Advent+Pro|Roboto|Quicksand|Lato|Roboto|Anton|Archivo+Black&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://kit.fontawesome.com/cfc27c408f.js"></script>
<style>
html{
    height: 100%;
    width:100%;
}
body{
    background:rgb(28,28,30);
}
.container-fluid{
    height: 100%;
    width:100%;
}

.logo-text{
    margin-top:10%;
    color: rgba(255, 255, 255, 0.673);
    font-family: 'Archivo Black', sans-serif;
    font-size: 1000%;
}
.desc{
    color: rgb(218, 218, 218);
    font-family: 'Archivo Black', sans-serif;
    font-size: 90%;
    margin-bottom: 5%;
}
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-ellipsis div {
  position: absolute;
  top: 27px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #dfc;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 6px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 6px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 26px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 45px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(19px, 0);
  }
}

</style>
</head>
<body>

    <div class="container-fluid">
        <div class="text-center">
            <h1 class='logo-text'>SMD</h1>
        <h6 class='desc'>Linux v1.7.1-stable</h6>
        </div>
        <div class="text-center">
            
            <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
        </div>
    </div>

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script>
       $(document).ready(function(){
        $(function() {
            $.post(
              'http://127.0.0.1:5000/login',
              function(data) {
                data = $.parseJSON(data)
                window.location.replace(data.status);
            });
        });
      });
    </script>
</body>
</html>
